<template>
    <div class="layout">
        <el-card class="box-card">
            <el-tabs class="demo-tabs">
                <el-tab-pane label="登录">
                    <el-form :rules="rules" :model="userInfo" label-position="top" label-width="60px" status-icon
                        style="max-width: 460px" class="loginForm">
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="userInfo.username" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="userInfo.password" />
                        </el-form-item>
                        <el-form-item label="验证码：" prop="check" style="text-align: center;">
                            <el-input v-model="userInfo.checkCode" style="width: 258px; height: 40px" />

                            <el-image style="width: 100px; height: 40px" src="http://43.139.33.166:8088/verifyCode" />
                        </el-form-item>

                        <el-row>
                            <el-checkbox class="checkBox" v-model="isAgree" label="同意用户使用准则" name="type" />
                        </el-row>
                        <el-button type="primary" class="loginBtn" @click="submitForm">
                            登录
                        </el-button>
                    </el-form>
                </el-tab-pane>

                <!-- <el-tab-pane label="注册">
                    <el-form label-position="right" label-width="100px" style="max-width: 460px" class="loginForm">
                        <el-form-item label="账号：">
                            <el-input v-model="rUsername" />
                        </el-form-item>
                        <el-form-item label="密码：">
                            <el-input type="password" v-model="rPassword" />
                        </el-form-item>
                        <el-form-item label="确认密码：">
                            <el-input type="password" v-model="confirmPassword" @blur="confirmFunc" />
                        </el-form-item>

                        <el-row>
                            <el-checkbox class="checkBox" v-model="rAgree" label="同意用户使用准则" name="type" />
                        </el-row>
                        <el-button type="primary" class="loginBtn" @click="register">
                            注册
                        </el-button>
                    </el-form>
                </el-tab-pane> -->
            </el-tabs>
        </el-card>

    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormRules } from 'element-plus'
import { getCode } from '../network/api'
onMounted(() => {
    let code = reactive({})
    // 获取验证码
    new Promise((resolve) => {
        code = getCode()
        console.log(getCode());

        resolve('get')
    }).then(() => {
        console.log(code);

    })



})

console.log(getCode());
let userInfo = reactive({
    username: '',
    password: '',
    checkCode: ''

})
let isAgree = ref(false)
const validateName = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the username'))
    } else {
        callback()
    }
}
const validatePass = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the username'))
    } else {
        callback()
    }
}
const validateCode = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the username'))
    } else {
        callback()
    }
}
const rules = reactive<FormRules<typeof userInfo>>({
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    checkCode: [{ validator: validateCode, trigger: 'blur' }]
})

const submitForm = () => {
    if (userInfo.username !== '' && userInfo.password !== '' && isAgree.value && userInfo.checkCode !== '') {
        // 发起登陆的请求

    }

}





</script>
  
<style scoped>
.layout {
    position: absolute;
    left: calc(50% - 200px);
    top: 20%;
    width: 400px;
}

.loginBtn {
    width: 100px;
}

.loginForm {
    text-align: center;
}

.checkBox {
    margin-left: 7px;
}

.inpWidth {
    width: 165px;
}
</style>
  